<template>
  <div>
    <h1>图表组件--坐标地图--丝路热点：世界地图</h1>
    <v-chart theme="technology" :options="options" :auto-resize="true"/>
  </div>
</template>

<script>
export default {
  name: "ChartMapWorld",
  data() {
    return {
      options: {}
    };
  },
  mounted() {
    this.options = {
      visualMap: {
        left: "right",
        min: 500000,
        max: 38000000,
        inRange: {
          color: [
            "#313695",
            "#4575b4",
            "#74add1",
            "#abd9e9",
            // "#e0f3f8",
            // "#ffffbf",
            // "#fee090",
            // "#fdae61",
            // "#f46d43",
            // "#d73027",
            // "#a50026"
          ].reverse()
        },
        text: ["High", "Low"], // 文本，默认为数值文本
        calculable: false
      },
      series: [
        {
          name: "world",
          type: "map",
          roam: true,
          map: "world",
          itemStyle: {
            emphasis: { label: { show: true } }
          },
          // 文本位置修正
          textFixed: {
            Alaska: [20, -20]
          },
          data: []
        }
      ]
    };
  }
};
</script>